<template>
  <div class="tabsBox">
    <!-- 下一步处理人选择操作 -->
    <Wf_ProcessNext
      :taskid="taskid"
      :processinstanceid="processinstanceid"
      :category="category"
      :isEditModel="isEditModel"
    >
    </Wf_ProcessNext>

    <!-- 当前为执行环节 -->
    <a-tabs
      type="card"
      :tabBarGutter="20"
      :activeKey="activeKey"
      @change="changeTab"
      tabPosition="top"
      :tabBarStyle="{
        backgroundColor: '#f5f6f9',
        border: 'none',
        height: '50px'
      }"
      :forceRender="true"
    >
      <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.label">
        <ExecuteHandleProcedure
          v-if="item.key != 'execute_force'"
          :key="item.key"
          :ref="item.key"
          :applyid="applyid"
          :busiKey="item.config.value"
          :category="category"
          :btnLabel="item.btnLabel"
          :isEditModel="isEditModel"
          :processinstanceid="processinstanceid"
          :sonStatus="sonStatus"
          :reason="reason"
          :admreview="admreview"
          @reload="init"
        />
        <div class="enforce" v-else-if="item.key == 'execute_force'">
          <a-tabs :activeKey="forceTabKey" @change="changeExecuteTab" tabPosition="top" :forceRender="true">
            <a-tab-pane v-for="forcetab in forceTabList" :key="forcetab.key" :tab="forcetab.label">
              <ExecuteHandleProcedure
                :key="forcetab.key"
                :ref="forcetab.key"
                :applyid="applyid"
                :busiKey="forcetab.config.value"
                :category="category"
                :btnLabel="forcetab.btnLabel"
                :isEditModel="isEditModel"
                :processinstanceid="processinstanceid"
                :sonStatus="sonStatus"
                :reason="reason"
                :admreview="admreview"
                @reload="init"
              />
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import {
  tabMenu,
  getCategoryType,
  hear_restoreProctype,
  survey_category,
  execute_category
} from '@/utils/handlecase/tab_list.js'
import { getSonStatusByIds } from '@/api/accept/apl_admreview'
import { viewApl_admre_audit } from '@/api/accept/apl_admre_audit'
import { ModelKey } from '@/enumeration/ModelKey.js'
import { St_admreviewsonEnum } from '@/enumeration/St_admreviewson.js'
import { Tp_proctypeValue } from '@/enumeration/Tp_proctype.js'

export default {
  props: {
    applyid: {
      type: String,
      default: '',
      required: true
    },
    taskid: {
      type: String,
      required: true
    },
    category: {
      // 流程状态
      type: String
    },
    processinstanceid: {
      type: String,
      default: '',
      required: true
    },
    isEditModel: {
      // 是否是编辑模式
      type: Boolean,
      default: false,
      required: true
    }
  },
  data () {
    return {
      activeKey: undefined, // 当前激活的key
      tabList: [], // 渲染的处理菜单
      tabMenu: tabMenu,
      sonStatus: [], // 子流程状态
      decisiontype: undefined, // 决定类型
      reason: '', // 案由
      forceTabList: [], // 执行步骤的tab菜单
      forceTabKey: undefined, // 执行步骤激活的key
      categoryType: '', // 当前的环节： 受理还是审理
      ModelKey: ModelKey,
      admreview: {}, // 主记录数据
      isLawExecute: false // 是否是法院强制执行
    }
  },
  created () {
    // this.category = 'executeview'
    this.init()
    const forceTabCopyList = JSON.parse(JSON.stringify(this.tabMenu['force_inner']))
    this.forceTabList = forceTabCopyList
  },
  // 深度简单主tab的变化，若是主tab为对应的调查tab，则对应的子tab也要进行切换
  watch: {
    activeKey: {
      handler (newValue, oldVal) {
        if (newValue == 'execute_force') {
          // 若新菜单为调查菜单
          // 判断当前的步骤是否是内部的步骤，若是，则自动调整，若不是则默认是第一个
          if (this.isLawExecute) {
            this.forceTabKey = this.forceTabList[1].key
          } else {
            this.forceTabKey = this.forceTabList[0].key
          }
          // this.tabList.forEach((item) => {
          //   if (item.categoryKey == this.category) {
          //     this.forceTabKey = item.key
          //   }
          // })
          // if (survey_category.includes(this.category)) {
          //   this.surveyTabList.forEach((item) => {
          //     if (item.categoryKey == this.category) {
          //       this.surveyTabKey = item.key
          //     }
          //   })
          // }
        }
      },
      deep: true // 深度监听
    }
  },
  methods: {
    async init () {
      // 获取当前的环节
      const res = await viewApl_admre_audit(this.$route.params.applyid)
      if (res.code == 0) {
        if (res.data && res.data.type == Tp_proctypeValue.EXECUTE_FORCE_LAW) {
          this.isLawExecute = true
        }
        this.executeInit()
      } else {
        this.$message.error('查询子流程失败')
      }
    },
    // 决定环节初始化
    async executeInit () {
      const _this = this
      const tabCopyList = JSON.parse(JSON.stringify(this.tabMenu['executeview']))
      this.tabList = tabCopyList
      // 对于决定步骤的情况特殊处理
      this.categoryType = 'execute'
      const res = await getSonStatusByIds({ applyid: this.applyid })
      if (res.code !== 0) {
        _this.$message.error('查询子流程失败')
      } else {
        this.sonStatus = res.data.sonStatus
        if (this.activeKey == '' || this.activeKey == null || this.activeKey == undefined) {
          if (this.tabList && this.tabList.length > 0) {
            this.activeKey = this.tabList[0].key
          }
          // 若是对应的子流程激活中 则默认定位到子流程中
          // this.tabList.forEach((item) => {
          //   debugger
          //   if (item.categoryKey == this.category) {
          //     this.activeKey = item.key
          //   }
          // })
          if (this.sonStatus && this.sonStatus.length > 0) {
            if (this.sonStatus.includes('execute_perform')) {
              this.activeKey = this.tabList.filter(el => el.key == 'execute_perform')[0].key
            } else if (this.sonStatus.includes('execute_self')) {
              this.activeKey = this.tabList.filter(el => el.key == 'execute_self')[0].key
            } else {
              this.activeKey = 'execute_force'
            }
          }
        }
      }
    },

    // tab页切换
    changeTab (key) {
      this.activeKey = key
    },
    changeExecuteTab (key) {
      this.forceTabKey = key
    },
    async gotoTab (category) {
      this.activeKey = this.tabList[0].key
      const res = await getSonStatusByIds({ applyid: this.applyid })
      if (res.code !== 0) {
        this.$message.error('查询子流程失败')
      } else {
        this.sonStatus = res.data.sonStatus
        const isrest = res.data.isrest // 是否中止
        if (isrest) {
          // 若是中止-恢复， 需要修改中止的配置为中止恢复，后续补充该方法
          for (const index in this.tabList) {
            if (this.tabList[index].key == 'hear_rest') {
              this.tabList[index] = hear_restoreProctype
            }
          }
        }
        if (survey_category.includes(this.category)) {
          this.activeKey = 'hear_survey' // 调查步骤
        } else {
          this.tabList.forEach(item => {
            if (item.categoryKey == category) {
              this.activeKey = item.key
            }
          })
        }
      }
    }
  },
  components: {
    ExecuteHandleProcedure: () => import('@/views/handleCase/execute/ExecuteHandleProcedure.vue'),
    Wf_ProcessNext: () => import('@/views/workflow/Wf_ProcessNext.vue')
  }
}
</script>

<style lang="less" scoped>
.tabsBox {
  height: 65vh;
  overflow: auto;
  // ::v-deep .ant-tabs-nav-container {
  //   height: 40px !important;
  //   border-bottom: 1px solid #f5f5f5;
  // }
  ::v-deep .ant-tabs-nav-container {
    height: 50px !important;
    border: none !important;
  }
  ::v-deep .ant-tabs-tab {
    background-color: rgba(240, 240, 240, 0.44) !important;
    // color: #818181 !important;
    // box-shadow: 0px 0px 46px 0px rgba(240, 240, 240, 0.44) !important;
    min-width: 140px !important;
    text-align: center;
    height: 50px !important;
    // opacity: 0.65;
    line-height: 50px !important;
  }
  ::v-deep .ant-tabs-tab-active {
    background-color: #fff !important;
    color: #0072c6 !important;
  }
  // ::v-deep .ant-tabs-nav-scroll {
  //   background-color: rgba(240, 240, 240);
  // }
  .enforce {
    ::v-deep .ant-tabs-tab {
      background-color: #fff !important;
      // color: #818181 !important;
      // box-shadow: 0px 0px 46px 0px rgba(240, 240, 240, 0.44) !important;
      width: 200px !important;
      text-align: center;
      // height: 40px !important;
      // opacity: 0.65;
      // line-height: 40px;
      padding: 0 !important;
    }
    ::v-deep .ant-tabs-ink-bar {
      min-width: 140px !important;
      // margin-top: 10px;
      margin-left: 30px !important;
    }
  }
}
</style>
